<template>
  <div class="edit-popup">
    <popup
      ref="popupRef"
      title="设置存储"
      :async="true"
      width="550px"
      @confirm="handleSubmit"
      @close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        label-width="120px"
        :rules="formRules"
      >
        <el-form-item label="存储方式" prop="engine">
          <div>
            <el-radio model-value>{{ getStorageInfo?.name }} </el-radio>
            <div class="form-tips">{{ getStorageInfo?.tips }}</div>
          </div>
        </el-form-item>
        <div v-if="formData.engine !== 'local'">
          <el-form-item label=" 存储空间名称" prop="bucket">
            <div class="flex-1">
              <el-input
                v-model="formData.bucket"
                placeholder="请输入存储空间名称(Bucket)"
                clearable
              />
            </div>
          </el-form-item>
          <el-form-item label="ACCESS_KEY" prop="access_key">
            <el-input
              v-model="formData.access_key"
              placeholder="请输入ACCESS_KEY(AK)"
              clearable
            />
          </el-form-item>
          <el-form-item label="SECRET_KEY" prop="secret_key">
            <el-input
              v-model="formData.secret_key"
              placeholder="请输入SECRET_KEY(SK)"
              clearable
            />
          </el-form-item>
          <el-form-item label="空间域名" prop="domain">
            <div class="flex-1">
              <div>
                <el-input
                  v-model="formData.domain"
                  placeholder="请输入空间域名(Domain)"
                  clearable
                />
              </div>
              <div class="form-tips">
                请补全http://或https://，例如https://static.cloud.com
              </div>
            </div>
          </el-form-item>
          <el-form-item
            v-if="formData.engine == StorageEnum.QCLOUD"
            label="REGION"
            prop="region"
          >
            <el-input
              v-model="formData.region"
              placeholder="请输入region"
              clearable
            />
          </el-form-item>
        </div>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio :label="0">关闭</el-radio>
            <el-radio :label="1">开启</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </popup>
  </div>
</template>
<script lang="ts" setup>
import { storageSetup } from "@/api/setting/storage";
import type { FormInstance } from "element-plus";
import Popup from "@/components/popup/index.vue";
import { storageDetail } from "@/api/setting/storage";
enum StorageEnum {
  LOCAL = "local", // 本地
  QINIU = "qiniu", // 七牛云
  ALIYUN = "aliyun", // 阿里云OSS
  QCLOUD = "qcloud", // 腾讯云OSS
}

const emit = defineEmits(["success"]);
const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const formData = reactive({
  engine: "",
  bucket: "",
  access_key: "",
  secret_key: "",
  domain: "",
  region: "", // 腾讯云需要
  status: 0,
});

const storageArr = [
  {
    name: "本地存储",
    type: StorageEnum.LOCAL,
    tips: "本地存储方式不需要配置其他参数",
  },
  {
    name: "七牛云存储",
    type: StorageEnum.QINIU,
    tips: "切换七牛云存储后，素材库需要重新上传至七牛云",
  },
  {
    name: "阿里云OSS",
    type: StorageEnum.ALIYUN,
    tips: "切换阿里云OSS后，素材库需要重新上传至阿里云OSS",
  },
  {
    name: "腾讯云OSS",
    type: StorageEnum.QCLOUD,
    tips: "切换腾讯云OSS后，素材库需要重新上传至腾讯云OSS",
  },
];

const formRules = {
  bucket: [
    {
      required: true,
      message: "请输入存储空间名称",
      trigger: "blur",
    },
  ],
  access_key: [
    {
      required: true,
      message: "请输入ACCESS_KEY",
      trigger: "blur",
    },
  ],
  secret_key: [
    {
      required: true,
      message: "请输入SECRET_KEY",
      trigger: "blur",
    },
  ],
  domain: [
    {
      required: true,
      message: "请输入空间域名",
      trigger: "blur",
    },
  ],
  region: [
    {
      required: true,
      message: "请输入REGION",
      trigger: "blur",
    },
  ],
};

const getStorageInfo = computed(() => {
  return storageArr.find((item) => item.type == formData.engine);
});

const handleSubmit = async () => {
  await formRef.value?.validate();
  await storageSetup(formData);
  popupRef.value?.close();
  emit("success");
};

const getDetail = async () => {
  const data = await storageDetail({
    engine: formData.engine,
  });
  for (const key in data) {
    //@ts-ignore
    formData[key] = data[key];
  }
};

const open = (type: string) => {
  formData.engine = type;
  popupRef.value?.open();
  getDetail();
};

const handleClose = () => {
  formRef.value?.resetFields();
};

defineExpose({
  open,
});
</script>
